<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <film-swiper :key="datalist.length">
          <film-swiper-item v-for="data in datalist" :key="data.id" class="filmswiperitem">
            <img :src="data.imgUrl" alt="">
          </film-swiper-item>
        </film-swiper>
        <film-header class="sticky"></film-header>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/components/films/FilmSwiper.vue'
import filmSwiperItem from '@/components/films/FilmSwiperItem.vue'
import filmHeader from '@/components/films/FilmHeader.vue'
import axios from 'axios'

export default {
  components: {
    filmSwiper,
    filmSwiperItem,
    filmHeader
  },
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    setTimeout(() => {
      axios.get('/banner.json').then(res => {
        // console.log(res.data)
        this.datalist = res.data.banner
      })
    })
  }

}
</script>
<style lang="scss" scoped>
.filmswiperitem{
  width:100%;
}
.filmswiperitem img{
  width:100%;
}
.sticky{
  position:sticky;
  top:0;
  z-index: 100;
  background: white;
}
</style>
